import * as echarts from '../../../utils/ec-canvas/echarts'
  let chart = null;
  // echarts版本的图表数据方法
  
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //纯js图表的数据start
    percentage: 80, //应该显示为小点的百分比
    dotShowCount: 19, //显示为黄色的小点数量
    x: 50, //原点x坐标百分比
    y: 100, //原点y坐标百分比
    r: 100, //圆的半径
    list: [], //小芝麻的列表 保存坐标 left top
    percent: 10, //几个点显示黄色
    i: 0, //动态点的数量
    c: 0, //动态点的积分数量
    count: 377, //积分数量
    allCount: 6000, //积分的基数
    //纯js图表的数据end
    // echarts图表的数据源start
    ec: {
      lazyLoad: true
    }
    // echarts图表的数据源end
  },
  onLoad: function (options) {
    // 纯js图表的方法调用
    var that = this
    var count = 3777 //假数据，模拟接口获取到的积分数据
    var percent = parseInt(count / 6000 * 25)
    that.setData({
      count,
      percent
    })
    that.getList()
    //纯js图标的方法调用end
    // 调用echarts方法
    that.ecComponentOne = that.selectComponent('#mychart-dom-bar');
    that.init();
  },
  // 纯js图表的函数
  getList: function () {
    var that = this
    var list = []
    var x = that.data.x
    var y = that.data.y
    var r = that.data.r
    for (var i = 0; i < 25; i++) {
      var top = r * Math.sin(180 - (7.2 * i) * Math.PI * 2 / 360)
      var left = r * Math.cos(180 - (7.2 * i) * Math.PI * 2 / 360)
      var topCount = (r + 30) * Math.sin(180 - (7.2 * i) * Math.PI * 2 / 360) - 10
      var leftCount = (r + 30) * Math.cos(180 - (7.2 * i) * Math.PI * 2 / 360)
      list.push({
        top: top,
        left: left,
        topCount: topCount,
        leftCount: leftCount
      })
    }
    that.setData({
      list
    })
    // 动态显示
    var set = setInterval(() => {
      if (that.data.i >= that.data.percent) {
        that.setData({
          i: that.data.percent,
          c: that.data.count
        })
        clearInterval(set)
        return
      } else {
        that.setData({
          i: that.data.i + 1,
          c: parseInt(that.data.allCount / 25 * that.data.i)
        })
      }
    }, 100)
  },
  //纯js图表函数end
  // echarts版本图表start
  init(){
    console.log('进入echarst实例化');
    let that = this
    let percent = 0.5;//这个控制echarts图表刻度的多少。
    that.ecComponentOne.init((canvas, width, height) => {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        // devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
    
      let option = {
        series: [{
            name: '刻度',
            type: 'gauge',
            radius: '119.0%',
            center: ['50%', '90%'],
            min: 0, //最小刻度
            max: 50, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: '#C51A2A',
              distance: -18,
              formatter: function(v) {
                switch (v + '') {
                  case '0':
                    return '0';
                  case '5':
                    return '200';
                  case '10':
                    return '400';
                  case '15':
                    return '600';
                  case '20':
                    return '800';
                  case '25':
                    return '1千';
                  case '35':
                    return '3千';
                  case '45':
                    return '5千';
                  case '50':
                    return '8千';
                }
              }
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 2,
              lineStyle: {
                color: '#C51A2A',
                width: 1,
              },
              length: -7
            }, //刻度样式
            splitLine: {
              show: true,
              length: -11,
              lineStyle: {
                color: '#C51A2A',
                width: 1,
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            type: 'gauge',
            radius: '119%',
            center: ['50%', '90%'],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  [
                    percent, new echarts.graphic.LinearGradient(
                      0, 0, 1, 0, [{
                          offset: 0,
                          color: '#FAC97F'
                        },
                        {
                          offset: 1,
                          color: '#E95D48'
                        }
                      ]
                    )
                  ],
                  [1, '#D4D2D3']
                ]
              }
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              show: true,
              offsetCenter: [0, '-5%'], // x, y，单位px
              textStyle: {
                color: '#666',
                fontSize: 12
              }
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, '-40%'],
              color: '#000',
              formatter: function(params) {
                return params
              },
              textStyle: {
                fontSize: 25
              }
            },
            data: [{
              name: "累计积分",
              value: 1000
            }]
          }
        ]
      };
    
      chart.setOption(option);
      return chart;
    })
  }
  // echarts版本图表end
})